<template>
  <page-container>
    <a-spin :spinning="spinning1" tip="正在加载...">
      <a-row class="card" :gutter="10" :span="24">
        <a-col :span="3">
          <a-card
            :bordered="false"
            size="small"
            style="height: 105px; position: relative; font-size: 13px"
          >
            <template #title>
              <i v-html="topList.icon[0]" :style="{ color: topList.color[0] }" class="iconfont"></i>
              <span style="margin-left: 10px">
                {{ headAll.featureName }}
              </span>
            </template>
            <div>
              <span
                style="color: #88a7d7; display: inline-block; min-width: 75px; text-align: right"
              >
                提取要素量
              </span>
              &nbsp;
              <span style="font-size: 16px; font-weight: 600">
                {{ headAll.clueNum }}
              </span>
            </div>
            <div>
              <span
                style="color: #88a7d7; display: inline-block; min-width: 75px; text-align: right"
              >
                涉警量
              </span>
              &nbsp;
              <span>
                {{ headAll.caseNum }}
              </span>
            </div>
          </a-card>
        </a-col>
        <a-col>
          <a-button
            size="small"
            type="primary"
            ghost
            style="height: 100%; width: 20px"
            @click="handleDel"
            :disabled="count == 0 ? true : false"
          >
            <template #icon>
              <left-outlined />
            </template>
          </a-button>
        </a-col>
        <a-col :span="20">
          <a-tabs :activeKey="count" :span="20">
            <a-tab-pane v-for="(item, elindex) in headList" :key="elindex" :tab="elindex">
              <a-card
                size="small"
                :span="3"
                v-for="el in item"
                :key="el.featureCode"
                :bordered="false"
                style="
                  width: 100%;
                  float: left;
                  font-size: 13px;
                  margin: 0 5px;
                  height: 105px;
                  position: relative;
                "
              >
                <template #title>
                  <i
                    v-html="topList.icon[el.id]"
                    :style="{ color: topList.color[el.id] }"
                    class="iconfont"
                  ></i>
                  <span style="margin-left: 10px">
                    {{ el.featureName }}
                  </span>
                </template>
                <div>
                  <span
                    style="
                      color: #88a7d7;
                      display: inline-block;
                      min-width: 75px;
                      text-align: right;
                    "
                  >
                    提取要素量
                  </span>
                  &nbsp;
                  <span>
                    {{ el.clueNum }}
                  </span>
                </div>
                <div>
                  <span
                    style="
                      color: #88a7d7;
                      display: inline-block;
                      min-width: 75px;
                      text-align: right;
                    "
                  >
                    涉警量
                  </span>
                  &nbsp;
                  <span>
                    {{ el.caseNum }}
                  </span>
                </div>
              </a-card>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col>
          <a-button
            size="small"
            type="primary"
            ghost
            style="height: 100%; width: 20px"
            @click="handleAdd"
          >
            <template #icon>
              <right-outlined />
            </template>
          </a-button>
        </a-col>
      </a-row>
    </a-spin>
    <a-spin :spinning="spinning2" tip="正在加载...">
      <a-card size="small" style="margin-top: 8px">
        <template #title>
          <div>
            <img
              src="@/assets/image/statistics/ai.svg"
              alt=""
              style="height: 40px; position: absolute; left: -3px; top: -3px"
            />
            <span style="margin-left: 36px">要素挖掘统计分析</span>
          </div>
        </template>
        <template #extra>
          模式：
          <a-radio-group
            style="margin-right: 40px"
            v-model:value="radioState"
            @change="radioChange"
          >
            <a-radio :value="0">时间模式</a-radio>
            <a-radio :value="1">辖区模式</a-radio>
          </a-radio-group>
          <a-radio-group v-model:value="timeState" button-style="solid" @change="radioChange">
            <a-radio-button :value="0">近一个月</a-radio-button>
            <a-radio-button :value="1">近三个月</a-radio-button>
            <a-radio-button :value="2">近一年</a-radio-button>
          </a-radio-group>
        </template>
        <a-row v-if="radioState === 0">
          <a-col :span="10">
            <div>各串并要素挖掘情况</div>
            <a-empty
              style="padding-top: 100px"
              v-if="essentialPieList == '' || essentialPieList == null"
            />
            <pie
              v-else
              :data="essentialPieList"
              :height="300"
              :fieldNames="{
                name: 'featureName',
                value: 'clueNum',
              }"
              @zrender:click="zrenderClick"
              title=""
            />
          </a-col>
          <a-col :span="14">
            <div style="float: left">辖区各要素挖掘情况</div>
            <timeLine
              :height="300"
              type="智能"
              :data="essentialTimeList"
              :legend="['警情数量']"
              :fieldNames="{ name: 'dDate', values: ['clueNum'] }"
              @zrender:click="timeChartClickHandle"
            />
          </a-col>
        </a-row>
        <div v-else>
          <div style="text-align: center">辖区各要素挖掘情况</div>
          <barEcharts :option="essentialXList" :height="300" />
        </div>
      </a-card>
    </a-spin>
    <a-row :gutter="10" style="margin-top: 8px">
      <a-col :span="10">
        <a-spin :spinning="spinning3" tip="正在加载...">
          <a-card size="small" style="height: 410px; overflow-y: auto">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span style="margin-left: 36px">要素研判新发警情提示</span>
              </div>
            </template>
            <a-list size="small" :data-source="latestList">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-descriptions size="small" style="margin-top: 10px">
                    <a-descriptions-item style="width: 50%">
                      <i
                        v-html="item.featureIcon"
                        :style="{ color: item.featureColor }"
                        class="iconfont"
                      ></i>
                      <span style="color: #138fde">&nbsp;{{ item.featureName }}</span>
                      （
                      <div
                        class="decoration"
                        @click="detailsClick(item.seriesNo, item.featureValue, item.classifyCode)"
                      >
                        {{ item.featureValue }}
                      </div>
                      ）
                    </a-descriptions-item>
                    <a-descriptions-item>{{ item.classifyName }}</a-descriptions-item>
                    <a-descriptions-item>
                      <div
                        class="decoration"
                        @click="detailsClick(item.seriesNo, item.featureValue, item.classifyCode)"
                      >
                        本周关联
                        <span style="color: red">{{ item.clueNum }}</span>
                        起警情
                      </div>
                    </a-descriptions-item>
                  </a-descriptions>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-spin>
      </a-col>
      <a-col :span="14">
        <a-spin :spinning="spinning4" tip="正在加载...">
          <a-card size="small" style="height: 410px">
            <img
              src="@/assets/image/statistics/ai.svg"
              alt=""
              style="height: 40px; position: absolute; left: -3px; top: -3px"
            />
            <a-tabs size="small" v-model:activeKey="activeKey" @change="childrenIndex = 0">
              <a-tab-pane
                v-for="(classifyItem, index) in classifyList"
                :key="index"
                :tab="classifyItem.name"
              >
                <a-row :span="24" style="width: 100%">
                  <a-col :span="11">
                    <simple-pie
                      :data="classifyItem.children"
                      :height="380"
                      :fieldNames="{
                        name: 'classifyName',
                        value: 'clueNum',
                      }"
                      @zrender:click="simpleClick"
                    />
                  </a-col>
                  <a-col :span="13">
                    <a-card
                      style="height: 350px; overflow-y: auto"
                      size="small"
                      :bordered="false"
                      v-if="classifyItem.children[childrenIndex]"
                    >
                      <a-row>
                        <a-col style="font-size: 12px" :span="16">
                          {{ classifyItem.children[childrenIndex].classifyName }}串并线索TOP5
                        </a-col>
                        <a-col style="font-size: 10px" :span="4">涉警量</a-col>
                        <a-col style="font-size: 10px" :span="4">线索中占比</a-col>
                      </a-row>
                      <a-list
                        size="small"
                        style="height: 100%"
                        :data-source="classifyItem.children[childrenIndex].top5List"
                      >
                        <template #renderItem="{ item, index }">
                          <a-list-item>
                            <a-descriptions size="small" style="margin-top: 10px">
                              <a-descriptions-item style="width: 70%">
                                <i
                                  v-html="item.featureIcon"
                                  :style="{ color: item.featureColor }"
                                  class="iconfont"
                                ></i>
                                <span style="color: #138fde">&nbsp;{{ item.featureName }}</span>
                                （
                                <div
                                  class="decoration"
                                  @click="
                                    detailsClicks(
                                      item.seriesNo,
                                      item.featureValue,
                                      item.classifyCode,
                                    )
                                  "
                                >
                                  {{ item.featureValue }}
                                </div>
                                ）
                              </a-descriptions-item>
                              <a-descriptions-item>
                                <span :style="{ color: index == 0 ? 'red' : '' }">
                                  {{ item.clueNum }}
                                </span>
                              </a-descriptions-item>
                              <a-descriptions-item>
                                <span :style="{ color: index == 0 ? 'red' : '' }">
                                  {{ item.percent }}
                                </span>
                              </a-descriptions-item>
                            </a-descriptions>
                          </a-list-item>
                        </template>
                      </a-list>
                    </a-card>
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-spin>
      </a-col>
    </a-row>
    <!-- 警情列表 -->
    <police-list-drawer
      v-model:visible="tabVisible"
      :title="titleData"
      :tabs="policeTabs"
    ></police-list-drawer>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from 'vue';
import { ClassifyList } from './typing';
import SimplePie from '@/components/charts/pie/simple-pie/index.vue';
import Pie from '@/components/charts/pie/active-pie/index.vue';
import barEcharts from '../components/barEcharts.vue';
import timeLine from '../components/timeLine.vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import {
  getQueryFeatureStat,
  getQueryFeatureChartStat,
  getQueryFeatureLatest,
  getQueryClassifyStat,
  getQueryFeatureTime,
} from '@/api/study-judge/statistics/research-statistics';
import { topList } from '../list/js/element';

export default defineComponent({
  name: 'studyJudgeStatistics',
  setup() {
    const ListParams = reactive({
      statType: 0,
      timeRange: 2,
    });
    const headAll = ref({});
    const count = ref<number>(0);
    const childrenIndex = ref<number>(0);
    const spinning1 = ref<boolean>(true);
    const spinning2 = ref<boolean>(true);
    const spinning3 = ref<boolean>(true);
    const spinning4 = ref<boolean>(true);
    const radioState = ref<number>(0);
    const timeState = ref<number>(2);
    //头部
    const headList = ref<any>([]);
    const queryFeatureStat = async () => {
      const res = await getQueryFeatureStat();
      spinning1.value = !spinning1.value;
      if (res.code === 200) {
        if (res.data != null) {
          headAll.value = res.data.all[0];
          let arr: any[] = [];
          arr = res.data.list;
          for (let index = 0; index < arr.length; index++) {
            arr[index].id = index + 1;
          }
          for (let index = 0; index < arr.length; index += 6) {
            headList.value.push(arr.slice(index, index + 6));
          }
        }
      }
    };
    //要素挖掘统计分析
    const essentialPieList = ref<Array<any>>([]);
    const essentialTimeList = ref<Array<any>>([]);
    const essentialXList = ref<any>({ xData: [], yData: [], newData: [] });
    const timeList = ref<Array<any>>([]);
    const queryFeatureChartStat = async () => {
      const res = await getQueryFeatureChartStat(ListParams);
      spinning2.value = !spinning2.value;
      if (res.code === 200 && res.data != null) {
        if (radioState.value === 0) {
          essentialPieList.value = res.data.pieList;
          timeList.value = res.data.timeList;
          essentialTimeList.value = res.data.timeList;
        } else if (radioState.value === 1) {
          essentialXList.value = { xData: [], yData: [], newData: [] };
          if (res.data.xList) {
            essentialXList.value.newDara = res.data.xList;
            res.data.xList.forEach((item: any) => {
              item.data = [];
              essentialXList.value.xData.push(item.name);
              res.data.yList.forEach((el: any) => {
                if (el.code == item.code) {
                  el.name = el.childName;
                  (el.parentName = item.parentName),
                    (el.percent = item.percent),
                    (el.caseNum = item.caseNum),
                    (el.code = item.code),
                    essentialXList.value.yData.push(el);
                }
              });
            });
            essentialXList.value.yData = essentialXList.value.yData.map((item: any) => ({
              stack: 'value',
              type: 'bar',
              barWidth: '40px',
              name: item.name,
              data: item.valueList,
              parentName: item.parentName,
              percent: item.percent,
              caseNum: item.caseNum,
              code: item.code,
            }));
          }
        }
      }
    };
    //各串并要素挖掘情况
    const queryFeatureTim = async (dataIndex: number) => {
      const TimeParams = reactive({
        timeRange: timeState,
        featureCode: essentialPieList.value[dataIndex].featureCode,
      });
      const res = await getQueryFeatureTime(TimeParams);
      spinning2.value = !spinning2.value;
      if (res.code === 200) {
        if (res.data != null) {
          essentialTimeList.value = res.data;
        }
      }
    };
    //要素研判新发警情提示
    const latestList = ref<Array<any>>([]);
    const callTimeEnd = ref<string>();
    const callTimeStart = ref<string>();
    const queryFeatureLatest = async () => {
      const res = await getQueryFeatureLatest();
      spinning3.value = !spinning3.value;
      if (res.code === 200) {
        if (res.data != null) {
          latestList.value = res.data.list;
          callTimeEnd.value = res.data.callTimeEnd;
          callTimeStart.value = res.data.callTimeStart;
        }
      }
    };
    //研判专题
    const classifyList = ref<Array<ClassifyList>>([]);
    const queryClassifyStat = async () => {
      const res = await getQueryClassifyStat();
      spinning4.value = !spinning4.value;
      if (res.code === 200) {
        if (res.data != null) {
          classifyList.value = res.data.list;
        }
      }
    };

    const simpleClick = (e: any) => {
      if (e.target) {
        const { dataIndex } = e.target;
        childrenIndex.value = dataIndex;
      }
    };

    const zrenderClick = async (e: any, state: boolean) => {
      if (e.target) {
        const { dataIndex } = e.target;
        if (state) {
          lineParams[0].params.featureCode = essentialPieList.value[dataIndex].featureCode;
          spinning2.value = !spinning2.value;
          queryFeatureTim(dataIndex);
        } else {
          lineParams[0].params.featureCode = '';
          essentialTimeList.value = timeList.value;
        }
      } else {
        lineParams[0].params.featureCode = '';
        essentialTimeList.value = timeList.value;
      }
    };

    //要素挖掘统计分析模式切换
    const radioChange = () => {
      spinning2.value = !spinning2.value;
      ListParams.timeRange = timeState.value;
      ListParams.statType = radioState.value;
      queryFeatureChartStat();
    };

    //头部导航
    const handleDel = () => {
      if (count.value > 0) {
        count.value--;
      }
    };
    const handleAdd = () => {
      if (count.value == headList.value.length - 1) {
        count.value = 0;
      }
      if (count.value < headList.value.length) {
        count.value++;
      }
    };

    const policeTabs = ref<Array<any>>([]);
    const titleData = ref<string>('');
    const tabVisible = ref<boolean>(false);
    const lineParams = [
      {
        name: '',
        url: '/series/detail/queryCaseList',
        params: reactive({
          callTimeStart: '',
          callTimeEnd: '',
          featureCode: '',
          subdivisionFlag: 'Y',
          trafficFlag: 'N',
          otherFlag: 'N',
          page: 1,
          size: 50,
          isEssential: true,
        }),
      },
    ];
    //折线图点击事件
    const timeChartClickHandle = (index: number, item: any) => {
      const dataStart = `${item.dDate} 00:00:00`;
      const dataEnd = `${item.dDate} 23:59:59`;
      titleData.value = item.dDate;
      lineParams[0].params.callTimeStart = dataStart;
      lineParams[0].params.callTimeEnd = dataEnd;
      policeTabs.value = lineParams;
      tabVisible.value = true;
    };

    //要素点击事件
    const detailsClick = (seriesNo: string, featureValue: string, classifyCode: string) => {
      titleData.value = '';
      const lineParams = [
        {
          name: '',
          url: '/series/detail/queryCaseList',
          params: reactive({
            seriesNo: seriesNo,
            featureValue: featureValue,
            inputParams: featureValue,
            classifyCodes: classifyCode,
            callTimeStart: callTimeStart.value,
            callTimeEnd: callTimeEnd.value,
            subdivisionFlag: 'Y',
            trafficFlag: 'N',
            otherFlag: 'N',
            page: 1,
            size: 50,
            isEssential: true,
          }),
        },
      ];
      policeTabs.value = lineParams;
      tabVisible.value = true;
    };

    //要素点击事件
    const detailsClicks = (seriesNo: string, featureValue: string, classifyCode: string) => {
      titleData.value = '';
      const lineParams = [
        {
          name: '',
          url: '/series/detail/queryCaseList',
          params: reactive({
            seriesNo: seriesNo,
            featureValue: featureValue,
            inputParams: featureValue,
            classifyCodes: classifyCode,
            callTimeStart: '',
            callTimeEnd: '',
            subdivisionFlag: 'Y',
            trafficFlag: 'N',
            otherFlag: 'N',
            page: 1,
            size: 50,
            isEssential: true,
          }),
        },
      ];
      policeTabs.value = lineParams;
      tabVisible.value = true;
    };

    onMounted(() => {
      queryFeatureStat();
      queryFeatureChartStat();
      queryClassifyStat();
      queryFeatureLatest();
    });

    return {
      headAll,
      headList,
      count,
      radioState,
      timeState,
      latestList,
      essentialPieList,
      essentialTimeList,
      essentialXList,
      classifyList,
      spinning1,
      spinning2,
      spinning3,
      spinning4,
      childrenIndex,
      policeTabs,
      titleData,
      tabVisible,
      topList,
      //方法
      simpleClick,
      detailsClick,
      detailsClicks,
      zrenderClick,
      handleDel,
      queryClassifyStat,
      queryFeatureStat,
      queryFeatureChartStat,
      queryFeatureLatest,
      queryFeatureTim,
      radioChange,
      handleAdd,
      timeChartClickHandle,
      num1: ref(0),
      num2: ref(0),
      activeKey: ref(0),
    };
  },
  components: {
    Pie,
    barEcharts,
    timeLine,
    SimplePie,
    RightOutlined,
    LeftOutlined,
    PoliceListDrawer,
    // LeftOutlined,
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-card-head-title) {
  font-weight: 700;
  font-size: 14px;
}
:deep(.card .ant-tabs-bar) {
  border-bottom-color: transparent;
}
:deep(.card .ant-tabs-nav-wrap) {
  display: none;
}
:deep(.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane, .ant-tabs
    .ant-tabs-bottom-content
    > .ant-tabs-tabpane) {
  display: flex;
}
:deep(.ant-tabs-bar) {
  margin: 0;
}
:deep(.decoration) {
  cursor: pointer;
}
:deep(.decoration):hover {
  text-decoration: underline;
}
:deep(.ant-empty-normal) {
  margin-top: 100px;
}
</style>
